<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="enhanced-scrollbar scroll-pt-[5.7rem] scroll-smooth">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Styles -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @stack('scripts')
        <script>
            const storageTheme = localStorage.getItem('theme')
            let theme = 'light'
            if(storageTheme){
                theme = storageTheme
            }else{
                theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
                localStorage.setItem('theme', theme)
            }
            document.documentElement.dataset.theme = theme
            
            document.addEventListener('alpine:init', () => {
                Alpine.store('darkMode', {
                    theme: theme,
                    toggle() {
                        this.theme = this.theme === 'dark' ? 'light' : 'dark'
                        document.documentElement.dataset.theme = this.theme
                        localStorage.setItem('theme', this.theme)
                    }
                })
            })
            document.addEventListener('livewire:navigated', () => {
                window.HSStaticMethods.autoInit()
            })
        </script>
    </head>
    <body class="relative flex min-h-screen flex-col antialiased">
        <header class="sticky top-0 z-50 w-full">
            <nav class="navbar gap-4 bg-primary text-base-100">
                <div class="navbar-start justify-end sm:justify-start items-center gap-4">
                    <label class="swap swap-rotate">
                        <input type="checkbox" />
                        <span class="icon-[tabler--menu-2] swap-off size-7"></span>
                        <span class="icon-[tabler--x] swap-on size-7"></span>
                    </label>
                    <a class="link no-underline icon-[logos--modx] text-2xl" href="/" wire:navigate></a>
                    
                </div>
                <div class="navbar-end flex items-center gap-4">
                    <label class="swap swap-rotate">
                        <input type="checkbox" :value="$store.darkMode.theme === 'dark'" x-data @change="$store.darkMode.toggle()" />
                        <span class="swap-off icon-[tabler--sun] size-7 text-yellow-400"></span>
                        <span class="swap-on icon-[tabler--moon] size-7"></span>
                    </label>
                    
                    <div class="dropdown relative inline-flex [--auto-close:inside] [--offset:8] [--placement:bottom-end]">
                        <button id="dropdown-scrollable" type="button" class="dropdown-toggle flex items-center" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                            <div class="avatar">
                            <div class="size-9.5 rounded-full">
                                <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar 1" />
                            </div>
                            </div>
                        </button>
                        <ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-avatar">
                            <li class="dropdown-header gap-2">
                            <div class="avatar">
                                <div class="w-10 rounded-full">
                                <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" />
                                </div>
                            </div>
                            <div>
                                <h6 class="text-base-content/90 text-base font-semibold">John Doe</h6>
                                <small class="text-base-content/50">Admin</small>
                            </div>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">
                                <span class="icon-[tabler--user]"></span>
                                My Profile
                            </a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">
                                <span class="icon-[tabler--settings]"></span>
                                Settings
                            </a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">
                                <span class="icon-[tabler--receipt-rupee]"></span>
                                Billing
                            </a>
                            </li>
                            <li>
                            <a class="dropdown-item" href="#">
                                <span class="icon-[tabler--help-triangle]"></span>
                                FAQs
                            </a>
                            </li>
                            <li class="dropdown-footer gap-2">
                            <a class="btn btn-error btn-soft btn-block" href="#">
                                <span class="icon-[tabler--logout]"></span>
                                Sign out
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <main class="flex-1 bg-base-100 transition-colors">
            <section>
                <div class="w-full lg:grid lg:grid-cols-[260px_minmax(0,1fr)]">
                    <aside class="aside-scroll enhanced-scrollbar top-16 z-20 h-[calc(100vh-4rem)] overflow-y-auto max-lg:hidden lg:sticky vertical-scrollbar border-r border-base-content/10">
                    <ul class="menu w-64 space-y-0.5 [&_.nested-collapse-wrapper]:space-y-0.5 [&_ul]:space-y-0.5 bg-opacity-0">
  <li>
    <a href="/" wire:navigate>
      <span class="icon-[tabler--home] size-5"></span>
      首页
    </a>
  </li>
  <li class="space-y-0.5">
    <a class="collapse-toggle open" id="menu-app" data-collapse="#menu-app-collapse">
      <span class="icon-[tabler--apps] size-5"></span>
      应用
      <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4 transition-all duration-300"></span>
    </a>
    <ul id="menu-app-collapse" class="open collapse w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="menu-app">
      <li>
        <a href="/chat" wire:navigate>
          <span class="icon-[tabler--message] size-5"></span>
          聊天
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          日历
        </a>
      </li>
      <li class="nested-collapse-wrapper">
        <a class="collapse-toggle open" id="sub-menu-academy" data-collapse="#sub-menu-academy-collapse">
          <span class="icon-[tabler--book] size-5"></span>
          阅读
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--settings] size-5"></span>
      设置
    </a>
  </li>
</ul>
                    </aside>
                    <div class="relative flex flex-col">
                        @if (isset($breadcrumbs))
                            <div class="breadcrumbs px-6 py-4">
                                <ul>
                                {{ $breadcrumbs }}
                                </ul>
                            </div>
                        @endif
                        
                        <div class="grow">
                            {{ $slot }}
                        </div>
                        <footer class="footer bg-base-200/60 px-6 py-4 text-xs border-t border-base-content/10">
                            <div class="w-full flex justify-between">
                                <span>响应时间: {{ round(microtime(true) - constant('LARAVEL_START'), 4) }}毫秒</span>
                                <p>Power By Aming💞</p>
                            </div>
                        </footer>
                    </div>
                    
                </div>
            </section>
            
    
        </main>
    </body>
</html>
